$k-c-white:#ffffff;
$k-c-black:#000000;
$k-c-gray:#808080;
$k-c-green:#9DD322;
$k-c-red:red;
$k-c-blue:#409eff;

.k-flex {
  display: flex;
}
.k-flex-col {
  display: flex;
  flex-direction: column;
}
.k-flex-wrap {
  flex-wrap: wrap;
}

.k-flex-nowrap {
  flex-wrap: nowrap;
}

.k-align-center {
  align-items: center;
}

.k-align-start {
  align-items: flex-start;
}

.k-align-end {
  align-items: flex-end;
}

.k-justify-center {
  justify-content: center;
}

.k-justify-left {
  justify-content: flex-start;
}

.k-justify-right {
  justify-content: flex-end;
}

.k-justify-between {
  justify-content: space-between;
}

.k-justify-around {
  justify-content: space-around;
}

.k-text-left {
  text-align: left;
}

.k-text-center {
  text-align: center;
}

.k-text-right {
  text-align: right;
}

// 定义flex等分
@for $i from 0 through 12 {
  .k-flex-#{$i} {
    flex: $i;
  }
}

// 定义字体(px)单位，小于20都为px单位字体
@for $i from 9 to 20 {
  .k-font-#{$i} {
    font-size: $i + px !important;
  }
}

// 定义字体(px)单位，大于或等于20的都为px单位字体
@for $i from 20 through 40 {
  .k-font-#{$i} {
    font-size: $i + px !important;
  }
}

// 定义内外边距，历遍1-80
@for $i from 0 through 80 {
  // 只要双数和能被5除尽的数
  @if $i % 2 == 0 or $i % 5 == 0 {
    // 得出：u-margin-30或者u-m-30
    .k-margin-#{$i}, .k-m-#{$i} {
      margin: $i + px!important;
    }

    // 得出：u-padding-30或者u-p-30
    .k-padding-#{$i}, .k-p-#{$i} {
      padding: $i + px!important;
    }

    @each $short, $long in l left, t top, r right, b bottom {
      // 缩写版，结果如： u-m-l-30
      // 定义外边距
      .k-m-#{$short}-#{$i} {
        margin-#{$long}: $i + px!important;
      }

      // 定义内边距
      .k-p-#{$short}-#{$i} {
        padding-#{$long}: $i + px!important;
      }

      // 完整版，结果如：u-margin-left-30
      // 定义外边距
      .k-margin-#{$long}-#{$i} {
        margin-#{$long}: $i + px!important;
      }

      // 定义内边距
      .k-padding-#{$long}-#{$i} {
        padding-#{$long}: $i + px!important;
      }
    }
  }
}

.k-m-top5 {
  margin-top:5px;
}
.k-m-top10 {
  margin-top: 10px;
}
.k-m-top20 {
  margin-top: 20px;
}
.k-m-top30 {
  margin-top: 30px;
}
.k-m-top40 {
  margin-top: 40px;
}
.k-m-left5 {
  margin-left: 5px;
}
.k-m-left10 {
  margin-left: 10px;
}
.k-m-left20 {
  margin-left: 20px;
}
.k-m-left30 {
  margin-left: 30px;
}
.k-m-right20 {
  margin-right: 20px;
}
.k-m-right30 {
  margin-right: 30px;
}
.k-m-bottom10 {
  margin-bottom: 10px;
}
.k-m-bottom20 {
  margin-bottom: 20px;
}
.k-m-bottom30 {
  margin-bottom: 30px;
}
.k-m-bottom40 {
  margin-bottom: 40px;
}
.k-m-bottom100 {
  margin-bottom: 100px;
}
.k-p0 {
  padding: 0;
}
.k-p10 {
  padding: 10px;
}
.k-p20 {
  padding: 20px;
}
.k-p30 {
  padding: 30px;
}
.k-p20-l-r {
  padding:0 20px;
}
.k-h10 {
  height: 10px;
}
.k-h30 {
  height: 30px;
}
.k-h60 {
  height: 60px;
}
.k-h80 {
  height: 80px;
}
.k-h100 {
  height: 100px;
}
.k-h120 {
  height: 120px;
}
.k-h200 {
  height: 200px;
}
.k-c-white {
  color: $k-c-white
}
.k-c-black {
  color: $k-c-black
}
.k-c-gray {
  color: $k-c-gray
}
.k-c-green {
  color: $k-c-green
}
.k-c-red {
  color: $k-c-red
}
.k-c-blue {
  color: $k-c-blue
}
.k-w60 {
  width: 60px;
}
.k-w80 {
  width: 80px;
}
.k-w100 {
  width: 100px;
}
.k-w120 {
  width: 120px;
}
.k-w160 {
  width: 160px;
}
.k-w200 {
  width: 200px;
}
.k-w300 {
  width: 300px;
}
.k-w-p100{
  width:100%;
}
.k-h100 {
  height: 100px;
}
.k-h200 {
  height: 200px;
}

.k-text-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.k-cursor-p {
  cursor: pointer;
}

